import EchartsWrap from '@/components/widgets/EchartsWrap';
import React, { useEffect, useState, useRef } from 'react';
import { Select } from 'antd';
import * as echarts from 'echarts';
import _ from 'lodash';
import styles from '../index.less';
import _data from './data';

const Option = Select.Option;

const SELECT_OPTIONS = [
  {
    year: '2021',
    subOptions: [{ key: '1', title: '一季度' }],
  },
  {
    year: '2020',
    subOptions: [
      { key: '3', title: '三季度' },
      { key: '4', title: '四季度' },
    ],
  },
];

const statusArr = ['天路', '凤翔路', '宜马通道', '312国道', '高浪路'];
const data = [232, 232, 178, 296, 128];

const option = {
  backgroundColor: 'transparent',
  className: 'echart-extra-info-1',
  title: [],
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    },
  },
  legend: {
    show: false,
  },
  color: ['#574EFF', '#2FB0FF', '#ffffff'],
  grid: {
    // containLabel: true,
    left: 80,
    right: 40,
    bottom: 10,
    top: 5,
  },
  xAxis: {
    type: 'value',
    splitLine: {
      show: false,
      lineStyle: {
        color: '#f00',
        width: 1,
        type: 'dashed',
      },
    },
    minorSplitLine: {
      show: false,
    },
    axisLabel: {
      show: true,
      color: 'rgba(255,255,255,0.45)',
      margin: 10,
    },
    axisTick: {
      show: false,
    },
    axisLine: {
      show: false,
    },
  },
  yAxis: [
    {
      type: 'category',
      inverse: true,
      axisLine: {
        show: true,
        lineStyle: {
          color: 'rgba(255,255,255,0.2)',
          width: 1,
        },
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgba(255,255,255,0.2)',
          width: 1,
          type: 'dashed',
        },
      },
      axisTick: {
        show: false,
      },
      axisPointer: {
        label: {
          show: false,
        },
      },
      data: statusArr,
      axisLabel: {
        margin: 60,
        fontSize: 14,
        align: 'left',
        color: 'rgba(255,255,255,0.65)',
      },
    },

    {
      type: 'category',
      inverse: true,
      axisLine: {
        show: false,
      },
      splitLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisPointer: {
        type: 'none',
        label: {
          show: false,
        },
      },
      data: statusArr,
      axisLabel: {
        margin: 0,
        fontSize: 0,
        align: 'right',
        color: 'rgba(255,255,255,0)',
      },
    },
  ],

  dataZoom: [
    {
      type: 'slider',
      show: true,
      start: 0,
      end: 50,
      height: 230,
      width: 8,
      yAxisIndex: [0],
      bottom: 5,
      left: 2,
      handleIcon:
        'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
      handleSize: '100%',
      handleStyle: {
        color: '#d3dee5',
      },
      textStyle: {
        color: '#fff',
      },
      borderColor: '#90979c',
      labelFormatter: '',
    },
  ],

  series: [
    {
      name: '履约值1',
      type: 'scatter',
      symbol: 'rect',
      symbolSize: [300, 18],
      symbolOffset: ['-50%', 0],
      itemStyle: {
        color: 'transparent',
        borderWidth: 1,
        borderColor: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
          {
            offset: 0,
            color: 'transparent',
          },
          {
            offset: 1,
            color: 'rgba(255,255,255,0.45)',
          },
        ]),
      },
      label: {
        show: false,
      },
      tooltip: {
        show: false,
      },
    },
    {
      name: '综合得分',
      type: 'bar',
      barWidth: 12,
      stack: '水位',
      itemStyle: {
        color: 'rgba(47, 176, 255, 1)',
      },
      // label: {
      //   show: false,
      // },
      label: {
        show: true,
        position: 'right',
        fontSize: 14,
        color: 'rgba(47, 176, 255, 1)',
      },
    },
    {
      type: 'bar',
      name: '背景',
      stack: '水位',
      barWidth: 12,
      itemStyle: {
        color: 'rgba(255,255,255,0.04)',
      },
      label: {
        show: false,
        // show: true,
        position: 'right',
        fontSize: 14,
        color: 'rgba(47, 176, 255, 1)',
      },
      tooltip: {
        show: false,
      },
    },
    {
      type: 'scatter',
      name: '现场管理、文明施工考核得分',
      symbolSize: [0, 0],
      itemStyle: {
        color: 'rgba(255,255,255,0)',
      },
      label: {
        show: false,
      },
    },
    {
      type: 'scatter',
      name: '',
      // name: '质量与安全考核',
      symbolSize: [0, 0],
      yAxisIndex: 1,
      itemStyle: {
        color: 'rgba(255,255,255,0)',
      },
      label: {
        show: false,
      },
    },
    // {
    //   type: 'scatter',
    //   name: '评定等级',
    //   symbolSize: [0, 0],
    //   itemStyle: {
    //     color: 'rgba(255,255,255,0)',
    //   },
    //   label: {
    //     show: false,
    //   },
    // },
    // {
    //   type: 'scatter',
    //   name: '全名',
    //   symbolSize: [0, 0],
    //   itemStyle: {
    //     color: 'rgba(255,255,255,0)',
    //   },
    //   label: {
    //     show: false,
    //   },
    // },
  ],
};

/**
 * 履约考核
 * @param {*} param0
 * @returns
 */
const WorkingStatus = ({}) => {
  const [curOption, setCurOption] = useState(option);
  const [curYear, setCurYear] = useState('2021');
  const curYearRef = useRef('2021');
  const [curSession, setCurSession] = useState('1');
  const [sessionList, setSessionList] = useState([]);
  const [curData, setCurData] = useState(_data['2021_1']);

  useEffect(() => {
    curYearRef.current = curYear;
    let _sessionList = SELECT_OPTIONS.filter(e => e.year === curYear)[0].subOptions;
    let _curSession = '';
    if (_sessionList.length) {
      _curSession = _sessionList[0].key;
    }
    setSessionList(_sessionList);
    setCurSession(_curSession);
    console.log(_sessionList, _curSession);
    return () => {};
  }, [curYear]);

  useEffect(() => {
    setCurData(_data[`${curYearRef.current}_${curSession}`]);
  }, [curSession]);

  useEffect(() => {
    const _option = _.cloneDeep(option);

    const [
      max,
      titleArr,
      manageScoreArr,
      safeScoreArr,
      scoreArr,
      levelArr,
      fullNameArr,
    ] = curData.reduce(
      (r, { index, name, fullName, company, manageScore, safeScore, score, level, comment }) => {
        r[0] = Math.max(r[0], score);
        r[1].push(name);
        r[2].push(manageScore);
        r[3].push(safeScore);
        r[4].push(score);
        r[5].push(level);
        r[6].push(fullName);
        return r;
      },
      [0, [], [], [], [], [], []],
    );
    // const max = _.max(data);
    const total = Math.ceil(max * 1.2);
    const d1 = [];
    const d2 = [];
    const d3 = [];
    for (let i = 0; i < scoreArr.length; i += 1) {
      d1.push(scoreArr[i]);
      d2.push(scoreArr[i]);
      d3.push(total - scoreArr[i]);
    }

    _option.yAxis[0].data = titleArr;
    _option.yAxis[1].data = fullNameArr;

    _option.series[0].data = d1;
    _option.series[1].data = d2;
    _option.series[2].data = d3;

    _option.series[3].data = manageScoreArr;
    _option.series[4].data = fullNameArr;
    // _option.series[4].data = safeScoreArr;
    // _option.series[5].data = levelArr;
    // _option.series[6].data = titleArr;

    console.log(JSON.stringify(_option, null, 4));
    setCurOption(_option);
  }, [curData]);
  return (
    <div className="chart-box" style={{ width: 450, marginRight: 24 }}>
      <div className="chart-box-title">
        <span className={styles.chartHead}>
          <span>履约考核</span>
          <span>
            <Select name="year" value={curYear} onChange={e => setCurYear(e)}>
              {SELECT_OPTIONS.map(e => {
                return (
                  <Option value={e.year} key={e.year}>
                    {e.year}
                  </Option>
                );
              })}
            </Select>
            <Select name="quarter" value={curSession} onChange={e => setCurSession(e)}>
              {!!sessionList.length &&
                sessionList.map(({ key, title }) => {
                  return (
                    <Option key={key} value={key}>
                      {title}
                    </Option>
                  );
                })}
            </Select>
          </span>
        </span>
      </div>
      <div className="chart-box-body chart-box-body-style1" style={{ overflow: 'initial' }}>
        <EchartsWrap option={curOption} width={400} opts={{ height: 240 }} />
      </div>
    </div>
  );
};

export default WorkingStatus;
